<template>
	<div class="flow-node">
		<div class="node-wrap" v-if="nodeConfig.type != 4">
			<div
				class="node-wrap-box"
				:class="
					(nodeConfig.type == 0 ? 'start-node ' : '') +
						(isTried && nodeConfig.error ? 'active error' : '')
				"
			>
				<div>
					<div
						class="title"
						:style="
							'background: rgb(' +
								['87, 106, 149', '255, 148, 62', '50, 150, 250'][nodeConfig.type] +
								');'
						"
					>
						<span class="icon" v-show="nodeConfig.type == 1">
							<icon-svg name="flow-approval" />
						</span>
						<span class="icon" v-show="nodeConfig.type == 2">
							<icon-svg name="flow-send" />
						</span>
						<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
						<input
							type="text"
							class="editable-title-input"
							v-if="nodeConfig.type != 0 && isInput"
							@blur="blurEvent()"
							@focus="$event.currentTarget.select()"
							v-focus
							v-model="nodeConfig.nodeName"
							:placeholder="placeholderList[nodeConfig.type]"
						/>
						<span
							class="editable-title"
							@click="clickEvent()"
							v-if="nodeConfig.type != 0 && !isInput"
						>
							{{ nodeConfig.nodeName }}
						</span>
						<i
							class="close el-icon-delete"
							v-if="nodeConfig.type != 0"
							@click="delNode()"
						/>
					</div>
					<div class="content" @click="setPerson">
						<div class="text" v-if="nodeConfig.type == 0">
							{{ arrToStr(flowPermission) ? arrToStr(flowPermission) : "所有人" }}
						</div>
						<div
							class="text"
							v-if="nodeConfig.type == 1"
							:title="setApproverStr(nodeConfig)"
						>
							<span class="placeholder" v-if="!setApproverStr(nodeConfig)">
								请选择{{ placeholderList[nodeConfig.type] }}
							</span>
							{{ setApproverStr(nodeConfig) }}
						</div>
						<div
							class="text"
							v-if="nodeConfig.type == 2"
							:title="copyerStr(nodeConfig)"
						>
							<span class="placeholder" v-if="!copyerStr(nodeConfig)"
								>请选择{{ placeholderList[nodeConfig.type] }}</span
							>
							{{ copyerStr(nodeConfig) }}
						</div>
						<!-- 发起人暂时不操作 -->
						<i class="el-icon-arrow-right arrow" v-if="nodeConfig.type != 0" />
					</div>
					<div class="error_tip" v-if="isTried && nodeConfig.error">
						<i class="el-icon-warning" style="color: rgb(242, 86, 67);"></i>
					</div>
				</div>
			</div>
			<add-node :childNodeP.sync="nodeConfig.childNode" />
		</div>
		<div class="branch-wrap" v-if="nodeConfig.type == 4">
			<div class="branch-box-wrap">
				<div class="branch-box">
					<button class="add-branch" @click="addTerm">添加条件</button>
					<div
						class="col-box"
						v-for="(item, index) in nodeConfig.conditionNodes"
						:key="index"
					>
						<div class="condition-node">
							<div class="condition-node-box">
								<div
									class="auto-judge"
									:class="isTried && item.error ? 'error active' : ''"
								>
									<div
										class="sort-left"
										v-if="index != 0"
										@click="arrTransfer(index, -1)"
									>
										<i class="el-icon-arrow-left" />
									</div>
									<div class="title-wrapper">
										<input
											type="text"
											class="editable-title-input"
											v-if="isInputList[index]"
											@blur="blurEvent(index)"
											@focus="$event.currentTarget.select()"
											v-focus
											v-model="item.nodeName"
										/>
										<span
											class="editable-title"
											@click="clickEvent(index)"
											v-if="!isInputList[index]"
											>{{ item.nodeName }}</span
										>
										<span
											class="priority-title"
											@click="setPerson(item.priorityLevel)"
										>
											优先级{{ item.priorityLevel }}
										</span>
										<i class="el-icon-delete close" @click="delTerm(index)" />
									</div>
									<div
										class="sort-right"
										v-if="index != nodeConfig.conditionNodes.length - 1"
										@click="arrTransfer(index)"
									>
										<i class="el-icon-arrow-right" />
									</div>
									<div
										class="content"
										@click="setPerson(item.priorityLevel)"
										:title="conditionStr(nodeConfig, index)"
									>
										{{ conditionStr(nodeConfig, index) }}
									</div>
									<div class="error_tip" v-if="isTried && item.error">
										<i
											class="el-icon-warning"
											style="color: rgb(242, 86, 67);"
										></i>
									</div>
								</div>
								<add-node :childNodeP.sync="item.childNode"></add-node>
							</div>
						</div>
						<node-wrap
							v-if="item.childNode && item.childNode"
							:nodeConfig.sync="item.childNode"
							:isTried.sync="isTried"
						/>
						<div class="top-left-cover-line" v-if="index == 0" />
						<div class="bottom-left-cover-line" v-if="index == 0" />
						<div
							class="top-right-cover-line"
							v-if="index == nodeConfig.conditionNodes.length - 1"
						/>
						<div
							class="bottom-right-cover-line"
							v-if="index == nodeConfig.conditionNodes.length - 1"
						/>
					</div>
				</div>
				<add-node :childNodeP.sync="nodeConfig.childNode" />
			</div>
		</div>
		<node-wrap
			v-if="nodeConfig.childNode && nodeConfig.childNode"
			:nodeConfig.sync="nodeConfig.childNode"
			:isTried.sync="isTried"
		/>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
import AddNode from "./add-node.vue";
import funcMixin from "./func.js";
export default {
	name: "node-wrap",
	mixins: [funcMixin],
	components: {
		AddNode
	},
	props: {
		nodeConfig: {
			type: Object,
			default: () => ({})
		},
		flowPermission: {
			type: Array,
			default: () => []
		},
		isTried: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			placeholderList: ["发起人", "审核人", "抄送人"],
			isInputList: [],
			isInput: false
		};
	},

	computed: {
		...mapGetters({
			flowPermission1: "flowDesignFlowPermission",
			approverConfig1: "flowDesignApproverConfig",
			copyerConfig1: "flowDesignCopyerConfig",
			conditionsConfig1: "flowDesignConditionsConfig"
		})
	},

	watch: {
		flowPermission1(data) {
			if (data.flag && data.id === this._uid) {
				this.$emit("update:flowPermission", data.value);
			}
		},
		approverConfig1(data) {
			if (data.flag && data.id === this._uid) {
				this.$emit("update:nodeConfig", data.value);
			}
		},
		copyerConfig1(data) {
			if (data.flag && data.id === this._uid) {
				this.$emit("update:nodeConfig", data.value);
			}
		},
		conditionsConfig1(data) {
			if (data.flag && data.id === this._uid) {
				this.$emit("update:nodeConfig", data.value);
			}
		}
	},
	mounted() {
		if (this.nodeConfig.type == 1) {
			this.nodeConfig.error =
				!this.setApproverStr(this.nodeConfig) || !this.nodeConfig?.operateType?.length;
		} else if (this.nodeConfig.type == 2) {
			this.nodeConfig.error = !this.copyerStr(this.nodeConfig);
		} else if (this.nodeConfig.type == 4) {
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error =
					this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
					i != this.nodeConfig.conditionNodes.length - 1;
			}
		}
	},
	methods: {
		clickEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, true);
			} else {
				this.isInput = true;
			}
		},
		blurEvent(index) {
			if (index || index === 0) {
				this.$set(this.isInputList, index, false);
				this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[
					index
				].nodeName
					? this.nodeConfig.conditionNodes[index].nodeName
					: "条件";
			} else {
				this.isInput = false;
				this.nodeConfig.nodeName = this.nodeConfig.nodeName
					? this.nodeConfig.nodeName
					: this.placeholderList[this.nodeConfig.type];
			}
		},
		// 节点删除
		delNode() {
			this.$emit("update:nodeConfig", this.nodeConfig.childNode);
		},
		addTerm() {
			let len = this.nodeConfig.conditionNodes.length + 1;
			this.nodeConfig.conditionNodes.push({
				nodeName: "条件" + len,
				type: 3,
				priorityLevel: len,
				conditionList: [],
				nodeUserList: [],
				childNode: null
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error =
					this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
					i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
		},
		delTerm(index) {
			this.nodeConfig.conditionNodes.splice(index, 1);
			this.nodeConfig.conditionNodes.map((item, index) => {
				item.priorityLevel = index + 1;
				item.nodeName = `条件${index + 1}`;
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error =
					this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
					i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
			if (this.nodeConfig.conditionNodes.length == 1) {
				if (this.nodeConfig.childNode) {
					if (this.nodeConfig.conditionNodes[0].childNode) {
						this.reData(
							this.nodeConfig.conditionNodes[0].childNode,
							this.nodeConfig.childNode
						);
					} else {
						this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode;
					}
				}
				this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
			}
		},
		reData(data, addData) {
			if (!data.childNode) {
				data.childNode = addData;
			} else {
				this.reData(data.childNode, addData);
			}
		},
		setPerson(priorityLevel) {
			var { type, settype } = this.nodeConfig;
			if (type == 0) {
				// this.$store.commit("updatePromoter", true);
				// this.$store.commit("updateFlowPermission", {
				// 	value: this.flowPermission,
				// 	flag: false,
				// 	id: this._uid
				// });
			} else if (type == 1) {
				this.$store.commit("updateApprover", true);
				this.$store.commit("updateApproverConfig", {
					value: {
						...JSON.parse(JSON.stringify(this.nodeConfig)),
						settype: settype ? settype : 1
					},
					flag: false,
					id: this._uid
				});
			} else if (type == 2) {
				this.$store.commit("updateCopyer", true);
				this.$store.commit("updateCopyerConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					flag: false,
					id: this._uid
				});
			} else {
				this.$store.commit("updateCondition", true);
				this.$store.commit("updateConditionsConfig", {
					value: JSON.parse(JSON.stringify(this.nodeConfig)),
					priorityLevel,
					flag: false,
					id: this._uid
				});
			}
		},
		arrTransfer(index, type = 1) {
			//向左-1,向右1
			this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(
				index + type,
				1,
				this.nodeConfig.conditionNodes[index]
			)[0];
			this.nodeConfig.conditionNodes.map((item, index) => {
				item.priorityLevel = index + 1;
			});
			for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
				this.nodeConfig.conditionNodes[i].error = this.conditionHasErr(this.nodeConfig, i);
				// this.conditionStr(this.nodeConfig, i) == "请设置条件" &&
				// i != this.nodeConfig.conditionNodes.length - 1;
			}
			this.$emit("update:nodeConfig", this.nodeConfig);
		}
	}
};
</script>
<style lang="scss" scoped>
.error_tip {
	position: absolute;
	top: 0px;
	right: 0px;
	transform: translate(150%, 0px);
	font-size: 24px;
}
.top-left-cover-line {
	left: -1px;
}

.top-left-cover-line,
.top-right-cover-line {
	position: absolute;
	height: 4px;
	width: 50%;
	background-color: #f5f5f7;
	top: -3px;
}

.top-right-cover-line {
	right: -1px;
}

.bottom-left-cover-line {
	left: -1px;
}

.bottom-left-cover-line,
.bottom-right-cover-line {
	position: absolute;
	height: 4px;
	width: 50%;
	background-color: #f5f5f7;
	bottom: -3px;
}

.bottom-right-cover-line {
	right: -1px;
}
.editable-title-input {
	flex: none;
	height: 18px;
	padding-left: 4px;
	text-indent: 0;
	font-size: 12px;
	line-height: 18px;
	z-index: 1;
	color: #333;
	border: 1px solid $primary;
	border-radius: 3px;
}

.editable-title-input:hover {
	text-decoration: none;
}

.auto-judge:hover .editable-title,
.node-wrap-box:hover .editable-title {
	border-bottom: 1px dashed #fff;
}
.auto-judge:hover .editable-title.editing,
.node-wrap-box:hover .editable-title.editing {
	text-decoration: none;
	border: 1px solid #d9d9d9;
}
.editable-title {
	line-height: 15px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px dashed transparent;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 40px;
	}
	&:hover {
		border-bottom: 1px dashed #fff;
	}
}
.auto-judge {
	position: relative;
	width: 220px;
	min-height: 72px;
	background: #fff;
	border-radius: 4px;
	padding: 14px 19px;
	cursor: pointer;
	&:after {
		pointer-events: none;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-radius: 4px;
		border: 1px solid transparent;
		transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	}
	&.active,
	&:active,
	&:hover {
		&:after {
			border: 1px solid $primary;
			box-shadow: 0 0 6px 0 mix(#fff, $primary, 30%);
		}
		.close {
			display: block;
		}
	}
	&.error:after {
		border: 1px solid #f25643;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	}
	.title-wrapper {
		position: relative;
		font-size: 12px;
		color: #15bc83;
		text-align: left;
		line-height: 16px;
		.editable-title {
			display: inline-block;
			max-width: 120px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.priority-title {
			display: inline-block;
			float: right;
			margin-right: 10px;
			color: rgba(25, 31, 37, 0.56);
		}
	}
	.placeholder {
		color: #bfbfbf;
	}
	.close {
		display: none;
		position: absolute;
		right: -10px;
		top: -10px;
		width: 20px;
		height: 20px;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.7);
		border-radius: 50%;
		text-align: center;
		line-height: 20px;
		z-index: 2;
	}
	.content {
		font-size: 14px;
		color: #191f25;
		text-align: left;
		margin-top: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.sort-left,
	.sort-right {
		position: absolute;
		top: 0;
		bottom: 0;
		display: none;
		z-index: 1;
		font-size: 12px;
		color: #000;
	}
	.sort-left {
		left: 0;
		border-right: 1px solid #f6f6f6;
	}
	.sort-right {
		right: 0;
		border-left: 1px solid #f6f6f6;
	}
	&:hover {
		.sort-left,
		.sort-right {
			display: flex;
			align-items: center;
			&:hover {
				background: #efefef;
			}
		}
	}
}

.branch-wrap,
.node-wrap {
	display: inline-flex;
	width: 100%;
}

.node-wrap {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 50px;
	position: relative;
}
.auto-judge:hover .editable-title {
	border-color: #15bc83;
}
.node-wrap-box {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	width: 220px;
	min-height: 72px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	&:after {
		pointer-events: none;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-radius: 4px;
		border: 1px solid transparent;
		transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	}
	&.active,
	&:active,
	&:hover {
		&:after {
			border: 1px solid $primary;
			box-shadow: 0 0 6px 0 mix(#fff, $primary, 30%);
		}
		.close {
			display: block;
		}
	}
	&.error:after {
		border: 1px solid #f25643;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	}
	.title {
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 16px;
		padding-right: 30px;
		width: 100%;
		height: 24px;
		line-height: 24px;
		font-size: 12px;
		color: #fff;
		text-align: left;
		background: #576a95;
		border-radius: 4px 4px 0 0;
		.icon {
			font-size: 12px;
			margin-right: 5px;
		}
	}
	.placeholder {
		color: #bfbfbf;
	}
	.close {
		display: none;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		font-size: 14px;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		line-height: 20px;
	}
	.content {
		position: relative;
		font-size: 14px;
		padding: 16px;
		padding-right: 30px;
		.text {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.arrow {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			width: 20px;
			height: 14px;
			font-size: 14px;
			color: #979797;
		}
	}
	&.start-node .content .text {
		display: block;
		white-space: nowrap;
	}
	&:before {
		content: "";
		position: absolute;
		top: -12px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 4px;
		border-style: solid;
		border-width: 8px 6px 4px;
		border-color: #cacaca transparent transparent;
		background: #f5f5f7;
	}
	&.start-node:before {
		content: none;
	}
}

.branch-box-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	min-height: 270px;
	width: 100%;
	flex-shrink: 0;
}
.branch-box {
	display: flex;
	overflow: visible;
	min-height: 180px;
	height: auto;
	border-bottom: 2px solid #ccc;
	border-top: 2px solid #ccc;
	position: relative;
	margin-top: 15px;
	.col-box {
		background: #f5f5f7;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			margin: auto;
			width: 2px;
			height: 100%;
			background-color: #cacaca;
		}
		.condition-node {
			min-height: 220px;
		}
		.condition-node,
		.condition-node-box {
			display: inline-flex;
			flex-direction: column;
		}
		.condition-node-box {
			padding-top: 30px;
			padding-right: 50px;
			padding-left: 50px;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
			position: relative;
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 2px;
				height: 100%;
				background-color: #cacaca;
			}
		}
	}
}
.add-branch {
	border: none;
	outline: none;
	user-select: none;
	justify-content: center;
	font-size: 12px;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	color: $primary;
	background: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center center;
	cursor: pointer;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	&:hover {
		transform: translateX(-50%) scale(1.1);
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
	}
	:active {
		transform: translateX(-50%);
		box-shadow: none;
	}
}
.col-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
</style>
